<template>
  <div class="box">

      <div class="name" >{{name}}</div>
      <div class="value" >
        {{value}}
        <span>小时</span>
      </div>
      <div class="total" ref="total"></div>
  </div>
</template>

<script>
export default {
  name: "DataItem",
  props:{
    name:{
      type:String,
      default:()=>('数据名称')
    },
    total:{
      type:Number,
      default:()=>(200)
    },
    value:{
      type:String,
      default:()=>('108')
    },
  },
  data(){
    return{
      workTimeList:[
          {nikeName:'李欣蔚',sumHourWork:'120'},
          {nikeName:'犯金刚',sumHourWork:'13'},
          {nikeName:'李宏宇',sumHourWork:'48'},
      ]
    };
  },

  mounted(){
    this.initStatus(200);
  },
  methods:{
    initStatus(cubeCount){
      // let totalDomWidth=this.$refs.total.offsetWidth;
      let ratio = (this.value / 200);
      // let cubeWidth=Math.floor((totalDomWidth/cubeCount)-1);
      let cubeWidth=5;

      let cubeDomArr;

      for(let i=0;i<cubeCount;i++){
        let cubeDom=document.createElement('span');
        cubeDom.style.background='#0F3D61'
        cubeDom.style.width=cubeWidth+'px'
        this.$refs.total.appendChild(cubeDom)
      }

      let nowCubeCount = Math.floor(cubeCount*ratio);
      cubeDomArr=this.$refs.total.children;

      let startColor=[16,139,247];
      let endColor=[15,218,250];
      let perDiffColor=[];

      for(let i=0;i<endColor.length;i++){
        perDiffColor.push( Number(((endColor[i]-startColor[i])/nowCubeCount).toFixed(3)))
      }
//数量多少的渐变色
      for(let i=0;i<nowCubeCount;i++){
        cubeDomArr[i].style.background=`RGB(
              ${startColor[0]+i*perDiffColor[0]},
              ${startColor[1]+i*perDiffColor[1]},
              ${startColor[2]+i*perDiffColor[2]})`
      }
      cubeDomArr[168].style.background = 'red'
      cubeDomArr[120].style.background = 'red'
    },
  },


}
</script>

<style lang="scss" scoped>

.box{
  width: 500px;
  height: 100px;
}
.box .name{
  font-size: 20px;
  color: #333333;
}

.box .total{
  width: 100%;
  height: 20px;
  //  border: 1px solid red;
  display: flex;
  //justify-content: space-between;
}


.box .value{
  color: #333333;
  font-size: 20px;
}

.box .value span{
  font-size: 20px;
}

</style>

